<template>
  <div class="theme-color-picker">
    <div class="gap-4 flex">
      <div v-for="color in themeColors" :key="color.value" class="relative group">
        <!-- 颜色圆圈 -->
        <div
          :class="[
            'w-12 h-12 rounded-full cursor-pointer border-2 transition-all duration-300 hover:scale-110',
            currentThemeColor === color.value
              ? 'border-foreground scale-110 shadow-lg ring-2 ring-primary/20'
              : 'border-border hover:border-border-variant hover:shadow-md'
          ]"
          :style="{ backgroundColor: color.color }"
          :title="getColorName(color.value)"
          @click="$emit('change', color.value)">
          <!-- 选中状态指示器 -->
          <div v-if="currentThemeColor === color.value" class="absolute inset-0 flex items-center justify-center">
            <div class="w-5 h-5 bg-white rounded-full flex items-center justify-center shadow-sm">
              <i class="i-mdi-check w-3 h-3 text-gray-800" />
            </div>
          </div>
        </div>

        <!-- 颜色名称 -->
        <div class="mt-2 text-center">
          <span
            :class="[
              'text-xs transition-colors',
              currentThemeColor === color.value
                ? 'text-foreground font-medium'
                : 'text-muted-foreground group-hover:text-foreground'
            ]">
            {{ getColorName(color.value) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { t } from '@/i18n';
import { type ThemeColor, themeColors } from '@/stores/theme';

interface Props {
  currentThemeColor: ThemeColor;
}

interface Emits {
  (e: 'change', color: ThemeColor): void;
}

defineProps<Props>();
defineEmits<Emits>();

// 获取颜色名称的国际化文本
const getColorName = (colorValue: ThemeColor): string => {
  const colorMap: Record<ThemeColor, string> = {
    blue: t('theme.colors.blue'),
    green: t('theme.colors.green'),
    purple: t('theme.colors.purple'),
    pink: t('theme.colors.pink'),
    orange: t('theme.colors.orange'),
    red: t('theme.colors.red'),
    cyan: t('theme.colors.cyan'),
    indigo: t('theme.colors.indigo'),
    emerald: t('theme.colors.emerald'),
    rose: t('theme.colors.rose')
  };
  return colorMap[colorValue] || colorValue;
};
</script>

<style scoped>
.theme-color-picker {
  @apply w-full;
}

/* 悬停效果 */
.group:hover .w-12 {
  transform: translateY(-2px);
}

.ring-2 {
  animation: pulse-ring 2s infinite;
}
</style>
